// 存放 scss 混合器

@import "./variables.scss";

/* 文字溢出处理 */
@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 自适应字体尺寸($size) -> ($xl:100%, $lg:100%, $md:90%, $sm:70%, $xs:65%) */
/* 使用示例: @include self-font-size(16px); */
@mixin self-font-size ($size) {
  // $xl or $lg
  @media screen and (min-width: $_xl), (min-width: $_lg) {
    font-size: $size;
  }
  // > $md < $lg
  @media screen and (min-width: $_md) and (max-width: $_lg) {
    font-size: $size * 0.9;
  }
  // > $sm < $md
  @media screen and (min-width: $_sm) and (max-width: $_md) {
    font-size: $size * 0.7;
  }
  // < $sm
  @media screen and (max-width: $_sm) {
    font-size: $size * 0.65;
  }
}
/* 自适应栅格尺寸xs<-->sm($attr, $xs, $sm) */
/* 使用示例: @include self-xs-sm(display, inline, none); */
@mixin self-xs-sm ($attr, $xs, $sm) {
  // < $sm
  @media screen and(max-width: $_sm) {
    #{$attr}: $xs;
  }
  // > $sm
  @media screen and(min-width: $_sm) {
    #{$attr}: $sm;
  }
}
/* 自适应sm<-->md栅格尺寸($attr, $sm, $md) */
/* 使用示例: @include self-sm-md(padding, 30px, 0) */
@mixin self-sm-md ($attr, $sm, $md) {
  // < $md
  @media screen and(max-width: $_md) {
    #{$attr}: $sm;
  }
  // > $md
  @media screen and(min-width: $_md) {
    #{$attr}: $md;
  }
}
/* 自适应md<-->lg栅格尺寸($attr, $md, $lg) */
/* 使用示例: @include self-md-lg(margin-left, 30px, 50px) */
@mixin self-md-lg ($attr, $md, $lg) {
  // < $lg
  @media screen and(max-width: $_lg) {
    #{$attr}: $md;
  }
  // > $lg
  @media screen and(min-width: $_lg) {
    #{$attr}: $lg;
  }
}
/* 自适应lg->xl栅格尺寸($attr, $xl, $lg) */
/* 使用示例: @include self-lg-xl(margin-left, 30px, 50px); */
@mixin self-lg-xl ($attr, $lg, $xl) {
  // < $xl
  @media screen and(max-width: $_xl) {
    #{$attr}: $lg;
  }
  // > $xl
  @media screen and(min-width: $_xl) {
    #{$attr}: $xl;
  }
}
/* 自适应全部栅格尺寸($attr, $xs, $sm, $md, $lg, $xl) */
/* 使用实例:
  @include self-adaption(options, 0, 0, 0, 0, 1);
  使用声明变量(每个选项都是可选项):
  @include self-adaption(
    $attr: opacity,
    $xs: 0,
    $sm: 0,
    $md: 0,
    $lg: 0,
    $xl: 1
  );
*/
@mixin self-adaption ($attr, $xs: null, $sm: null, $md: null, $lg: null, $xl: null) {
  @if ($xs != null) {
    @media screen and(max-width: $_sm) {
      #{$attr}: $xs;
    }
  }
  @if ($sm != null) {
    @media screen and(min-width: $_sm) {
      #{$attr}: $sm;
    }
    @if ($xs == null) {
      @media screen and(max-width: $_md) {
        #{$attr}: $sm;
      }
    }
  }
  @if ($md != null) {
    @media screen and(min-width: $_md) {
      #{$attr}: $md;
    }
    @if ($sm == null) {
      @media screen and(max-width: $_lg) {
        #{$attr}: $md;
      }
    }
  }
  @if ($lg != null) {
    @media screen and(min-width: $_lg) {
      #{$attr}: $lg;
    }
    @if ($md == null) {
      @media screen and(max-width: $_xl) {
        #{$attr}: $lg;
      }
    }
  }
  @if ($xl != null) {
    @media screen and(min-width: $_xl) {
      #{$attr}: $xl;
    }
  }
}
/* 

// 自适应字体尺寸($size) -> ($xl:100%, $lg:100%, $md:90%, $sm:70%, $xs:65%)
@include self-font-size(16px);

// 自适应栅格尺寸xs->sm($attr, $xs, $sm)
@include self-xs-sm(display, inline, none);

// 自适应sm->md栅格尺寸($attr, $sm, $md)
@include self-sm-md(padding, 30px, 0);

// 自适应md->lg栅格尺寸($attr, $md, $lg)
@include self-md-lg(width, 300px, 600px);

// 自适应lg->xl栅格尺寸($attr, $xl, $lg)
@include self-lg-xl(margin-left, 30px, 50px);

// 自适应全部栅格尺寸($attr, $xs, $sm, $md, $lg, $xl)
@include self-adaption(options, 0, 0, 0, 0, 1);
// or
@include self-adaption(
  $attr: opacity,
  $xs: 0,
  $sm: 0,
  $md: 0,
  $lg: 0,
  $xl: 1
);

 */